<template>
  <div class="subject-item-box">
    <div @click="slSubjectItemCode" class="item-cell">
      <div v-if="subjectType === 12" :class="{'item': true,'select': hasSlAnswerCode4SubjectType12}">{{code}}</div>
      <div v-else :class="{'item': true,'select': hasSlAnswerCode}">{{code}}</div>
      <span v-if="displayType === 1" class="des">{{txt}}</span>
      <img v-if="displayType === 2" :src="fileUrl" class="img"/>
      <audio v-if="displayType === 3" style="width: 100%;outline:none" controls :src="fileUrl" controlsList="nodownload"></audio>
      <video v-if="displayType === 4" class="video" controls :src="fileUrl">
        <track v-if="subtitle" :src="subtitle" lang="en" label="English" kind="subtitles" default />
      </video>
    </div>
  </div>
</template>

<script>
export default {
  name: 'subjectItem',
  props: {
    code: String,
    txt: String,
    displayType: Number,
    fileUrl: String,
    subtitle: String,
    slCode: String,
    subjectIndex: Number,
    subjectType: Number
  },
  methods: {
    /**
     * 选项选中事件
     */
    slSubjectItemCode () {
      if (this.subjectType === 12) {
        this.$emit('subjectItemSl', this.txt, this.subjectIndex)
        return
      }
      this.$emit('subjectItemSl', this.code, this.subjectIndex)
    }
  },
  computed: {
    hasSlAnswerCode () {
      if (this._.isEmpty(this.slCode)) return false
      if (this.slCode.includes(this.code)) return true
      return false
    },
    hasSlAnswerCode4SubjectType12 () {
      if (this._.isEmpty(this.slCode)) return false
      if (this.slCode === this.txt) return true
      return false
    }
  }
}
</script>

<style scoped lang="scss">
  .subject-item-box {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    .item-cell {
      margin-bottom: 20px;
      width: 100%;
      display: flex;
      cursor: pointer;
      align-items: center;
      .item {
        user-select:none;
        width: 36.3px;
        height: 36.3px;
        border-radius: 50%;
        font-size: 19px;
        cursor: pointer;
        font-family: PingFang SC;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(145, 149, 154, 1);
        color: rgba(145, 149, 154, 1);
      }
      .select {
        background: rgba(0, 156, 246, 1);
        color: rgba(255, 255, 255, 1);
      }
      .des {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        margin-left: 10px;
      }
      .img {
        width: 70%;
        height: auto;
      }
      .video{
        width: 70%;
        height: auto;
      }
    }
  }
</style>
